<template>
	<view class="item" @click="goTo">
		<image :src="img" mode="aspectFill"></image>
		<view class="info">
			<view class="title">{{title}}</view>
			<view class="desc" v-if="isTips"><text class="tip" v-for="(item,index) in infoList">{{item}}</text></view>
			<view class="desc" v-if="!isTips"><text class="line">{{infoList?infoList[0]:''}}</text></view>
			<view class="share">
				<image src="../../static/guided_icon_share@2x.png"></image><text>分享</text>
			</view>
			<view class="player">
				<image :src="start?playIconList[1]:playIconList[0]"></image><text>听讲解</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			id: String,
			img: String,
			title: String,
			isTips: Boolean,
			infoList: Array,
			play: String,
			notAntique: Boolean
		},
		data() {
			return {
				start: false,
				playIconList: [
					'../../static/guided_icon_Play@2x.png',
					'../../static/guided_icon_closure@2x.png'
				],
			}
		},
		methods: {
			goTo() {
				this.$emit('goTo', this.id, this.notAntique)
			}
		}
	}
</script>

<style>
	.item {
		width: calc(100% - 40rpx);
		height: 200rpx;
		padding: 20rpx;
		display: flex;
	}

	.item image {
		width: 200rpx;
		height: 200rpx;
		/* margin: 15rpx 0; */
		border-radius: 5rpx;
	}

	.item .info {
		padding: 10rpx 0;
		margin-left: 20rpx;
		width: calc(100% - 220rpx);
		height: calc(100% - 20rpx);
		display: flex;
		flex-direction: column;
		align-items: left;
		position: relative;
		/* justify-content: space-between; */
	}

	.item .info .title {
		font-size: 32rpx;
		color: #333;
		width: 100%;
	}

	.item .info .desc {
		/* margin-top: 20rpx; */
		font-size: 24rpx;
		color: #999;
		display: flex;
	}

	.item .info .desc .line {
		margin-top: 10rpx;
		display: inline-block;
		width: 300rpx;
		line-height: 30rpx;
		max-height: 60rpx;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.item .info .desc .tip {
		margin: 10rpx 10rpx 0 0;
		font-size: 24rpx;
		color: #999;
		padding: 5rpx 20rpx;
		border-radius: 20rpx;
		background: #eee;
	}

	.item .info .share {
		font-size: 28rpx;
		color: #666;
		position: absolute;
		bottom: 10rpx;
		left: 0rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.item .info .share image {
		margin-right: 10rpx;
		height: 28rpx;
		width: 28rpx;
	}

	.item .info .player {
		position: absolute;
		font-size: 24rpx;
		top: 80rpx;
		right: 0rpx;
		color: #fff;
		height: 50rpx;
		line-height: 44rpx;
		padding: 0 20rpx;
		border-radius: 25rpx;
		background: #B9AC90;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.item .info .player image {
		margin-right: 10rpx;
		height: 24rpx;
		width: 24rpx;
	}
</style>
